<template>
	<div class="set-adjust-class es-each-line">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	     	<div class="widget am-cf">
	        	<div class="widget-body am-fr">
					<div class="am-u-md-12 one-line">
						<el-select size="small" @change="handleChangeArea" class="am-u-sm-12 am-u-md-12 am-u-lg-3" v-model="query.areaTeamId" placeholder="请选择区域">
	                        <el-option
	                            v-for="item in areaTeams"
	                            :key="item.areaTeamId"
	                            :label="item.name"
	                            :value="item.areaTeamId">
	                        </el-option>
	                    </el-select>
	                    <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
					               :disabled="busTeams.length === 0" v-model="query.busTeamId" placeholder="请选择业务组">
					    	<el-option
						        v-for="item in busTeams"
						        :key="item.busTeamId"
						        :label="item.name"
						        :value="item.busTeamId">
					    	</el-option>
					    </el-select>
						<el-select :disabled="periods.length === 0" size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" clearable
	                        v-model="query.periodId" placeholder="请选择期数">
	                        <el-option
	                            v-for="item in periods"
	                            :key="item.periodId"
	                            :label="item.periodName"
	                            :value="item.periodId">
	                        </el-option>
	                    </el-select>
	                    <el-select class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                           v-model="query.gradeId" clearable placeholder="请选择年级">
		                	<el-option label="请选择年级" value="-1">
		               		</el-option>
		                	<el-option
			                    v-for="item in grades"
			                    :key="item.gradeId"
			                    :label="item.gradeName"
			                    :value="item.gradeId">
		                	</el-option>
		                </el-select>
                    </div>
                    <div class="am-u-md-12 one-line">
		                <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
			                       v-model="query.subjectId" placeholder="请选择科目">
			            	<el-option
				                v-for="item in subjects"
				                :key="item.value"
				                :label="item.label"
				                :value="item.value">
			            	</el-option>
			            </el-select>
			            <el-select size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
	                        v-model="query.segmentNo" placeholder="段次">
	                        <el-option
						        v-for="item in segmentNos"
						        :key="item.value"
						        :label="item.name"
						        :value="item.value">
					    	</el-option>
	                    </el-select>
						<el-select v-model="query.onlineState" size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" placeholder="请选择网报禁用状态">
							<el-option  label="网报禁用状态" value=""></el-option>
							<el-option  label="网报已禁用" :value="0"></el-option>
							<el-option  label="网报未禁用" :value="1"></el-option>
						</el-select>
	                    <el-select size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
	                        v-model="query.changeState" placeholder="请选择转班禁用状态">
	                        <el-option  label="转班禁用状态" value=""></el-option>
							<el-option  label="转班已禁用" :value="0"></el-option>
							<el-option  label="转班未禁用" :value="1"></el-option>
						</el-select>


			        </div>
			        <div class="am-u-md-12 one-line">
						<el-select v-model="query.isRecommend" size="small" clearable class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group" placeholder="请选择置顶禁用状态">
							<el-option  label="置顶状态" value=""></el-option>
							<el-option  label="已置顶" :value="1"></el-option>
							<el-option  label="未置顶" :value="0"></el-option>
						</el-select>
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.teacherName" placeholder="主讲老师姓名"/>
				            </div>
				        </div>
			        	<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.classNo" placeholder="班级编号"/>
				            </div>
				        </div>
				        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
				            <div class="am-form-group">
				            	<input type="text"  v-model="query.className" placeholder="班级名称"/>
				            </div>
				        </div>


			        </div>
					<div class="am-u-md-12 one-line">
						<el-date-picker class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
		                	v-model="classDate"
		                	type="daterange"
		                	placeholder="上课日期">
		                </el-date-picker>
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
					    	<button @click="search" type="button" class="btn-search am-btn am-btn-default am-btn-success">
					        	<span class="am-icon-search"></span>查询
					    	</button>
					    </div>
					</div>
					<div class="am-u-md-12 one-line">
						<div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
							<button type="button" @click="batchProcessing()" class="btn-search am-btn am-btn-default am-btn-success">
						        批量操作
					    	</button>
					    	<!-- <button type="button" @click="setDisable(selectIds,1)" class="btn-search am-btn am-btn-default am-btn-success">
						        批量取消禁用
						    </button> -->
						</div>
					</div>
				    <div class="am-u-sm-12 one-line clearBoth">
			            <el-table
			              :data="tableData"
			              @selection-change="handleSelectionChange"
			              :select-on-indeterminate="false"
			              border
			              stripe
			              :empty-text="tableNoDataTips"
			              style="min-width: 100%">
			              <el-table-column
			              	type="selection">
			              </el-table-column>
			              <el-table-column
			                label="期数"
			                prop="periodName"
			                min-width="80">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="班级编号"
			                prop="classNo"
			                width="100">
			              </el-table-column>
			              <el-table-column
			                label="班级名称"
			                prop="className"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="年级"
			                prop="gradeName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="科目"
			                prop="subjectName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="业务组"
			                prop="busTeamName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="开课日期"
			                min-width="100">
			                <template scope="scope">
			                	{{ scope.row.startCourseTime | formatDate }}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="开课时间"
			                prop="studyingTime"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="已上/总讲次"
			                min-width="120">
			                <template scope="scope">
			                  {{scope.row.completedLectureAmount}}/{{scope.row.lectureAmount}}
			                </template>
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="已报人数"
			                prop="regAmount"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="学位数"
			                prop="quota"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="主讲老师"
			                prop="teacherName"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="学费"
			                prop="studyingFee"
			                min-width="100">
			              </el-table-column>
			              <el-table-column
			                align="center"
			                label="操作"
			                min-width="170">
			                <!-- <template scope="scope"> -->
								<template scope="scope">
									<el-dropdown>
										<span class="el-dropdown-link">
										操作菜单<i class="el-icon-caret-bottom el-icon--right"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
										<el-dropdown-item v-if="hasPermission('change') && scope.row.changeState==1" @click.native="changeStateFun(scope.row,0)">禁用转班
										</el-dropdown-item>
										<el-dropdown-item v-if="hasPermission('change') && scope.row.changeState==0" @click.native="changeStateFun(scope.row,1)">取消禁用转班
										</el-dropdown-item>
										<el-dropdown-item v-if="hasPermission('forbidden') && scope.row.onlineState==1" @click.native="onlineStateFun(scope.row,0)">禁用网报
										</el-dropdown-item>
										<el-dropdown-item v-if="hasPermission('forbidden') && scope.row.onlineState==0" @click.native="onlineStateFun(scope.row,1)">取消禁用网报
										</el-dropdown-item>
										<el-dropdown-item v-if="hasPermission('recommend') && scope.row.isRecommend==0" @click.native="isRecommendFun(scope.row,1)">置顶</el-dropdown-item>
										<el-dropdown-item v-if="hasPermission('recommend') && scope.row.isRecommend==1" @click.native="isRecommendFun(scope.row,0)">取消置顶</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
									</template>
			                	<!-- <el-button v-if="scope.row.changeState == 0" size="small" @click="setDisable(scope.row.classId, 1)">取消禁用</el-button>
			                	<el-button v-if="scope.row.changeState == 1" size="small" @click="setDisable(scope.row.classId, 0)">禁用</el-button> -->

			              </el-table-column>
			            </el-table>
			        </div>
			        <div class="am-u-lg-12 am-cf">
			            <div class="am-fr">
			            	<pagination isShowPageSize v-bind:total="total" v-bind:pageNo="query.pageNo" v-bind:pageSize="query.pageSize" @paging="handleSearch" @pageSizeChange="pageSizeChange" />
			            </div>
			        </div>
	        	</div>
	        </div>
	    </div>
		<window ref="win" title="批量操作" calss="dialog-set-w">
			<el-form :model="form" ref="form" label-width="180px" class="demo-query dialog-set">
				<el-form-item v-if="hasPermission('change')" label="转班设置：">
					<el-select v-model="form.changeState" placeholder="转班设置">
						<el-option  label="请选择转班设置" value=""></el-option>
						<el-option  label="禁用转班" :value="0"></el-option>
						<el-option  label="取消禁用转班" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="hasPermission('forbidden')" label="网报设置：" prop="">
					<el-select v-model="form.onlineState" placeholder="网报设置">
						<el-option  label="请选择网报设置" value=""></el-option>
						<el-option  label="禁用网报" :value="0"></el-option>
						<el-option  label="取消禁用网报" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="hasPermission('recommend')" label="置顶设置：" prop="">
					<el-select v-model="form.isRecommend" placeholder="置顶设置">
						<el-option  label="请选择置顶设置" value=""></el-option>
						<el-option  label="置顶" :value="1"></el-option>
						<el-option  label="取消置顶" :value="0"></el-option>
					</el-select>
				</el-form-item>
				<div class="am-text-center">
					<el-button type="primary" @click="setDisable(selectIds)">提交</el-button>
				</div>
			</el-form>
		</window>
	</div>
</template>
<script>
	import io from '../../lib/io'
	import moment from 'moment'
	import Pagination from '../base/Pagination'
	export default{
		data(){
			return {
				tableNoDataTips: '暂无数据',
				tableData: [],
				selectIds: [],
				segmentNos: [
					{
						value: '1',
						name: '段次1'
					},
					{
						value: '2',
						name: '段次2'
					},
					{
						value: '3',
						name: '段次3'
					},
					{
						value: '4',
						name: '段次4'
					},
					{
						value: '5',
						name: '段次5'
					},
					{
						value: '6',
						name: '段次6'
					},
					{
						value: '7',
						name: '段次7'
					},
					{
						value: '8',
						name: '段次8'
					}
				],
				setState:[
					{
						name: '未禁用',
						value: 1
					},
					{
						name: '已禁用',
						value: 0
					}
				],
				total: 0,
				query:{
					areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
					busTeamId: '',
					periodId: '',
					gradeId: '',
					segmentNo: '',
					subjectId: '',
					changeState: '',
					onlineState:"",
					isRecommend:'',
					teacherName: '',
					classNo: '',
					className: '',
					greatStartCourseTime: '',
					lessStartCourseTime: '',
					pageNo: 1,
					pageSize: 10
				},
				classDate: '',
				periods: [],
				form:{
					changeState:'',
					onlineState:'',
					isRecommend:""

				}
			}
		},
		watch: {
	    	classDate(newVal) {
		        this.query.greatStartCourseTime = newVal[0] ? this.$options.filters.formatDate(newVal[0]) : ''
		        this.query.lessStartCourseTime = newVal[1] ? this.$options.filters.formatDate(newVal[1]): ''
		    }
		},
		 mounted: function () {
			$(window).smoothScroll()
		},
		components: {
	    	Pagination
	    },
		methods:{
			handleChangeArea(){
				this.loadPeriodData();
			},
			handleSelectionChange(value){
				this.selectIds = []
		        value.map(val => {
		          this.selectIds.push(val.classId)
		        })
			},
			setDisable(classId,state){
				if(classId.length===0){
					this.$alert('请选择班级！')
					return
				}
				if(Array.isArray(classId) && !classId.length) return;
				io.post(io.updateClassChangeState, Object.assign({
		          classIds: Array.isArray(classId) ? classId.join(',') : classId,
		        },this.form),(ret) => {
		        	if(ret.success){
		        		this.$alert('设置成功！')
						this.handleSearch();
						this.$refs.win.close()

		        	}else{
		        		this.$alert(ret.desc)
		        	}
		        })
			},
			batchProcessing(){
				this.form = {
					changeState:'',
					onlineState:'',
					isRecommend:""
				}
				this.$refs.win.show({
					width:500,
					height:600
				})
			},
			loadPeriodData(resolve) {
		        io.post(io.apiAdminPeriodListForAreaTeam, {
		          areaTeamId : this.query.areaTeamId
		        }, (ret) => {
					if (ret.success) {
						this.periods = ret.data;
						let curPeriodId = ret.data.filter(item => item.isCurrent == 1 )[0] ? ret.data.filter(item => item.isCurrent == 1 )[0].periodId : '';
						if(curPeriodId != ''){
							this.query.periodId = curPeriodId
						}else{
							this.query.periodId = this.periods.length ? this.periods[0].periodId : ''
						}

					} else {
						this.$alert(ret.desc)
					}

					if(resolve){
                        resolve('success');
                    }
		        })
	      	},
	      	search(){
	      		this.query.pageNo = 1;
	      		this.handleSearch();
	      	},
	      	handleSearch(pageNo){
	      		let formData = this.getFormDate(pageNo);
	      		io.post(io.settingChangeClassPage, formData , (ret) => {
		        	if(ret.success){
		        		this.tableData = ret.data.list;
		        		this.total = ret.data.total;
		        	}
		        })
			},
			pageSizeChange(pageSize){
				this.query.pageSize = pageSize
			},
	      	getFormDate(pageNo){
	      		this.query.pageNo = pageNo || this.query.pageNo || 1
	      		let formData = {};
	      		for(var key in this.query){
	      			if(Array.isArray(this.query[key])){
	      				formData[key] = this.query[key].join(",");
	      			}else if(typeof this.query[key] === "boolean"){
	      				if(this.query[key]){
	      					formData[key] = 1
	      				}
	      			}else {
	      				if((this.query[key] + '').trim() !== ''){
		      				formData[key] = this.query[key];
		      			}
	      			}
	      		}
	      		return formData;
			  },
			changeStateFun(row,state){
				console.log(888)
				io.post(io.updateClassChangeState,{
				  classIds:row.classId,
				  changeState:state,
		        },(ret) => {
		        	if(ret.success){
		        		this.$alert('设置成功！')
						this.handleSearch();

		        	}else{
		        		this.$alert(ret.desc)
		        	}
		        })
			},
			onlineStateFun(row,state){
				io.post(io.updateClassChangeState,{
				  classIds:row.classId,
				  onlineState:state,
		        },(ret) => {
		        	if(ret.success){
		        		this.$alert('设置成功！')
						this.handleSearch();

		        	}else{
		        		this.$alert(ret.desc)
		        	}
		        })

			},
			isRecommendFun(row,state){
				io.post(io.updateClassChangeState,{
				  classIds:row.classId,
				  isRecommend:state,
		        },(ret) => {
		        	if(ret.success){
		        		this.$alert('设置成功！')
						this.handleSearch();

		        	}else{
		        		this.$alert(ret.desc)
		        	}
		        })
			}

		},
		computed: {
			areaTeams() {
                return this.$root.config.areaTeams || []
            },
            busTeams() {
            	let busTeams = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
            	if(busTeams.length){
            		this.query.busTeamId = busTeams[0].busTeamId
            	}
		        return busTeams
		    },
		    grades: function () {
		        return this.$root.config.grades || []
		    },
		    subjects () {
		        return [{value: '', label: '全部科目'}].concat(
		        	this.$root.config.subjects.map(function(item){
		            	return {value: item.subjectId, label: item.subjectName}
		        	})
		        )
		    }
		},
		created(){
	    	let promise = new Promise((resolve, reject) => {
                this.loadPeriodData(resolve)
            });
	    	promise.then((value) => {
				// success
				this.handleSearch();
			}, (error) => {
				// failure
			});

	    },
	}
</script>
<style lang="less">
	.set-adjust-class{
		.clearBoth{
			// float: none!important;
			.el-table{
				margin-left: 0.6%;
				min-width: none;
				margin-right: 0.6%;
				.el-table-column--selection{
					.cell{
						text-overflow:clip;
					}
				}
				.el-table-column--selection.th{
					&>div{
						text-overflow:clip;
					}
				}
			}
		}

	}

	.dialog-set{
		padding:20px 30px;
		// .el-form-item{
		// 	.el-form-item__content{
		// 		text-align:left;
		// 	}
		// }
	}


</style>
